﻿<UserControl x:Class="Clock.Controls.Sense4FlipTab"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Height="142" Width="129" SnapsToDevicePixels="True">
    <UserControl.Resources>
        <Storyboard x:Key="FlipAnim">
            <DoubleAnimation Storyboard.TargetName="BgTopRotation" Storyboard.TargetProperty="Angle" From="0" To="180" Duration="0:0:0.7" AccelerationRatio="0.8" Completed="FlipAnimCompleted"/>
            <!--<DoubleAnimation Storyboard.TargetName="RotateTransform" Storyboard.TargetProperty="CenterY" From="-0.5" To="-0.48" Duration="0:0:0.25" AccelerationRatio="0.8" AutoReverse="True"/>-->
            <DoubleAnimation Storyboard.TargetName="ShadowScale" Storyboard.TargetProperty="ScaleY" From="0" To="1" Duration="0:0:0.35" BeginTime="0:0:0.2" FillBehavior="Stop"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <Image Name="Bg" Source="/Resources/FlipClock/Background/flip_bg.png" Width="129" Height="142" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Grid Name="BgLeftDigitGrid" VerticalAlignment="Center" Margin="0,-9,0,0">
                <Image Name="BgLeftDigitTop" Source="/Resources/Sense4FlipClock/Digits/1.png" Width="51" Height="73" Margin="0,0,0,0">
                    <Image.Clip>
                        <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                <Rect Width="51" Height="33.1"/>
                            </RectangleGeometry.Rect>
                        </RectangleGeometry>
                    </Image.Clip>
                </Image>
                <Image Name="BgLeftDigitBottom" Source="{Binding Source, ElementName=BgLeftDigitTop}" Width="51" Height="73" Margin="0,0,0,0">
                    <Image.Clip>
                        <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                <Rect Width="51" Height="43" Y="33"/>
                            </RectangleGeometry.Rect>
                        </RectangleGeometry>
                    </Image.Clip>
                </Image>
            </Grid>
            <Grid Margin="0,-9,0,0">
                <Image Grid.Column="1" Name="BgRightDigitTop" Source="/Resources/Sense4FlipClock/Digits/0.png" Width="51" Height="73" Margin="0,0,0,0">
                    <Image.Clip>
                        <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                <Rect Width="51" Height="33.1"/>
                            </RectangleGeometry.Rect>
                        </RectangleGeometry>
                    </Image.Clip>
                </Image>
                <Image Name="BgRightDigitBottom" Source="{Binding Source, ElementName=BgRightDigitTop}" Width="51" Height="73"  Margin="0,0,0,0" Opacity="1">
                    <Image.Clip>
                        <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                <Rect Width="51" Height="43" Y="33"/>
                            </RectangleGeometry.Rect>
                        </RectangleGeometry>
                    </Image.Clip>
                </Image>
            </Grid>
        </StackPanel>
        <Image Name="Shadow" Source="/Resources/FlipClock/Background/flip_clock_tab_shadow.png" Width="120" Height="62" Stretch="Fill" VerticalAlignment="Bottom" Margin="0,0,0,17">
            <Image.RenderTransform>
                <ScaleTransform x:Name="ShadowScale" ScaleY="0"/>
            </Image.RenderTransform>
        </Image>
        <Image Name="Divider" Source="/Resources/FlipClock/Background/flip_clock_divider.png"  Width="112" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1,0,0,13" Opacity="0" Visibility="Collapsed"/>
        <Image Name="AmPm" Source="/Resources/FlipClock/am.png" Width="20" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="18,85,0,0" Visibility="Collapsed"/>
        <Viewport3D ClipToBounds="False" Width="111" Height="54" VerticalAlignment="Top" Margin="0,10,0,0" Opacity="1">
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <Model3DGroup>
                        <GeometryModel3D>
                            <GeometryModel3D.Transform>
                                <RotateTransform3D x:Name="RotateTransform" CenterY="-0.5">
                                    <RotateTransform3D.Rotation>
                                        <AxisAngleRotation3D x:Name="BgTopRotation" Axis="1,0,0" Angle="0" />
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                            </GeometryModel3D.Transform>
                            <GeometryModel3D.Geometry>
                                <!-- Front. -->
                                <MeshGeometry3D
                                    Positions="-1 -1 0, 1 -1 0, 1 1 0, -1 1 0"
                                    TextureCoordinates="0 1, 1 1, 1 0, 0 0" 
                                    Normals="0 0 1  0 0 1  0 0 1  0 0 1"
                                    TriangleIndices="0 1 2, 0 2 3"/>
                            </GeometryModel3D.Geometry>

                            <GeometryModel3D.Material>
                                <MaterialGroup>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush ImageSource="/Resources/FlipClock/Background/flip_clock_tab_up.png" x:Name="TabUp" Stretch="Uniform" Viewbox="0,0,1,1.01" Viewport="0,0,1,1.01">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <TranslateTransform X="0.002" Y="-0.003"/>
                                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="0.97" ScaleX="0.96"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                    <!-- Digits -->
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="RightDigitTopBrush" ImageSource="{Binding ElementName=BgRightDigitBottom, Path=Source}"  Stretch="Fill" Viewbox="0,0,1,0.483" Viewport="0,0,1,0.9" Opacity="1">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="0.45" ScaleY="0.326"/>
                                                        <TranslateTransform x:Name="RightDigitTopTranslate" X="0.495" Y="0.452"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="LeftDigitTopBrush" ImageSource="{Binding ElementName=BgLeftDigitBottom, Path=Source}" Stretch="Fill" Viewbox="0,0,1,0.483" Viewport="0,0,1,0.9" Opacity="1">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="0.45" ScaleY="0.326"/>
                                                        <TranslateTransform X="0.05" Y="0.452"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                </MaterialGroup>
                            </GeometryModel3D.Material>

                            <GeometryModel3D.BackMaterial>
                                <MaterialGroup>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="TabDown" ImageSource="/Resources/FlipClock/Background/flip_clock_tab_down.png" Stretch="Uniform" Viewbox="0,0,1,1.0" Viewport="0,0,1,1.01">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <TranslateTransform X="0.00" Y="0.00"/>
                                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="-0.995" ScaleX="0.98"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="AmPmBack" Stretch="Uniform" ImageSource="/Clock;component/Resources/FlipClock/am.png" Opacity="0">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <TranslateTransform X="-1.85" Y="0.345"/>
                                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="-0.175" ScaleX="0.175"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                    <!-- Digits -->
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="RightDigitBottomBrush" ImageSource="{Binding ElementName=BgRightDigitTop, Path=Source}" Stretch="Fill" Viewbox="0,0.47,1,0.53" Viewport="0,0,1,0.9" Opacity="1">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="0.448" ScaleY="-0.373"/>
                                                        <TranslateTransform x:Name="RightDigitBottomTranslate" X="0.498" Y="0.765"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <ImageBrush x:Name="LeftDigitBottomBrush" ImageSource="{Binding ElementName=BgLeftDigitTop, Path=Source}" Stretch="Fill" Viewbox="0,0.47,1,0.53" Viewport="0,0,1,0.9" Opacity="1">
                                                <ImageBrush.Transform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="0.448" ScaleY="-0.373"/>
                                                        <TranslateTransform X="0.05" Y="0.765"/>
                                                    </TransformGroup>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                </MaterialGroup>
                            </GeometryModel3D.BackMaterial>
                        </GeometryModel3D>

                        <!-- Light source. -->
                        <AmbientLight Color="White" />
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <!-- Camera. -->
            <Viewport3D.Camera>
                <PerspectiveCamera FieldOfView="30" LookDirection="0 0 -1" UpDirection="0 1 0" Position="-0.01 0 3.62"/>
            </Viewport3D.Camera>
        </Viewport3D>
    </Grid>
</UserControl>
